<template>
  <div class="dash-board">
      <Row type="flex">
          <Col :span="24">
            <Panel :model="model.date" main="true" @modeChange="modeChange" :selectable="true" @paramChange="paramChange"></Panel>
          </Col>
          <Col :span="12">
            <Panel :model="model.product" :mode="monthly" :param="paramData"></Panel>
          </Col>
          <Col :span="12">
            <Panel :model="model.area" :mode="monthly" :param="paramData"></Panel>
          </Col>
      </Row>
  </div>
</template>

<script>
import Panel from "../panelTabChartBill";
import model from "./callModel";
export default {
  data() {
    return {
      model,
      monthly: false,
      paramData: {}
    };
  },
  methods: {
    paramChange(v) {
      this.$set(this, "paramData", {
        ...this.paramData,
        ...v
      });
    },
    modeChange(v) {
      this.monthly = v;
    }
  },
  components: {
    Panel
  }
};
</script>

<style>

</style>
